<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" 
    class="table-name"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="pName" label="姓名"  show-overflow-tooltip align="center" />
      <el-table-column
        prop="phonenumber"
        label="手机号"
        width="110"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="deptName"
        label="部门"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="postName"
        label="岗位"
        width="100"
        align="center"
      />
      <el-table-column
        prop="projectName"
        label="项目名称"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="projectCharacters"
        label="项目角色"
        align="center"
        show-overflow-tooltip
      />
    </el-table>
    <el-row type="flex" justify="end" style="margin-top: 10px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        small
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, prev, pager, next, sizes"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
//@ts-ignore
import { personnel } from "@/api/dataScreen/index.js";
import { ElMessage } from "element-plus";
const tableData = ref([]);

let pageNum = ref(1);
let pageSize = ref(10);
const total = ref(0);

const screenTable = async (val) => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  if (val) {
    params["projectName"] = val.projectName;
    params["pName"] = val.pName;
  }
  const response = await personnel(params);

  if (response.code === 200) {
    tableData.value = response.rows;
    total.value = response.total;
  } else {
    ElMessage.error(response.msg);
  }
};

const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  screenTable("");
};

const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  screenTable("");
};

onMounted(async () => {
  await screenTable("");
});

defineExpose({ screenTable });
</script>
<style scoped lang="scss">
.table-name{
  height:calc(42.5vh - 86px)
}
</style>
